
<template>
	<view class="container">
		<u-popup v-model="show" mode="bottom" height="784rpx" border-radius='60'>
			<view class="popup">
				<text class="title">金额明细</text>
				<view>
					<view class="money">
						<text class="money_title">{{money_infos.title}}</text>
						<text class="money_time">{{money_infos.time}}分钟达</text>
					</view>
					<view class="money2">
						<text>预估配送费</text>
						<view class="tip">
							<text class="discount">￥{{money_infos.discount}}</text>
							<text class="pay">￥{{money_infos.delivery}}</text>
						</view>
					</view>
					<view class="money2 temp">
						<text>餐盒费</text>
						<view class="tip">
							<text class="pay">￥{{money_infos.lunch_box}}</text>
						</view>
					</view>
					<view class="money2">
						<text>商家合计</text>
						<view class="tip">
							<text class="pay2">￥{{money_infos.total}}</text>
						</view>
					</view>
				</view>
				<view class="settlement">
					<u-checkbox @change="checkboxChange" label-size='28rpx' shape="circle"
						v-model="checked">全选</u-checkbox>
					<view class="count">
						<view class="count_left">
							<view>
								<text class="count_text">合计：</text>
								<text class="count_text2">￥236</text>
								<text class="count_text3">明细<u-icon name="arrow-up" color="#F43F5E" style="margin-left: 2rpx;" size="28"></u-icon></text>
							</view>
							<text class="count_text4">共优惠 ¥ 179</text>
						</view>
						<button type="default">结算({{1}})</button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				checked: false,
				money_infos:{
					title:"阿里与艾德炭烤麻里牛排海鲜",
					time:39,
					discount:5,
					delivery:0,
					lunch_box:10,
					total:236
				}
			}
		},
		methods: {
			checkboxChange() {
				this.checked = !this.checked
			}
		}
	}
</script>

<style lang="scss">
	.container {
		font-family: PingFangSC-Medium, PingFang SC;
		.popup {
			display: flex;
			flex-direction: column;
			margin: 0 52rpx;
			height: 100%;
			position: relative;

			.title {
				display: inline-block;
				margin-top: 38rpx;
				margin-bottom: 40rpx;
				text-align: center;
				width: 100%;
				font-size: 36rpx;
				font-weight: 800;
				color: #121212;
				line-height: 50rpx;
			}

			.money {
				display: flex;
				align-items: center;

				.money_title {
					font-size: 30rpx;
					font-weight: 600;
					color: #121212;
					line-height: 42rpx;
					margin-right: 14rpx;
				}

				.money_time {
					display: inline-block;
					text-align: center;
					width: 94rpx;
					border-radius: 4rpx;
					border: 2rpx solid #D7D7D7;
					font-size: 16rpx;
					font-weight: 400;
					color: #929292;
					line-height: 36rpx;
				}
			}

			.temp {
				margin: 20rpx 0;
			}

			.money2 {
				display: flex;
				justify-content: space-between;
				align-items: center;

				margin-top: 24rpx;

				text {
					font-size: 24rpx;
					font-weight: 400;
					color: #121212;
					line-height: 34rpx;
				}

				.tip {
					.discount {
						text-decoration: line-through;
						font-size: 24rpx;
						color: #929292;
						margin-right: 10px;
					}

					.pay {
						font-size: 28rpx;
						font-weight: 600;
						color: #121212;
					}

					.pay2 {
						font-size: 28rpx;
						font-weight: 600;
						color: #FF1A1A;
					}
				}
			}

			.settlement {
				position: absolute;
				bottom: 18rpx;
				display: flex;
				justify-content: space-between;
				width: 100%;
				.count {
					display: flex;
					justify-content: space-between;
					.count_left{
					display: flex;
					flex-direction: column;
						.count_text{
							font-size: 24rpx;
							font-weight: 400;
							color: #121212;
						}
						.count_text2{
							font-size: 36rpx;
							font-weight: 600;
							color: #FF1A1A;
							margin-right: 14rpx;
						}
						.count_text3{
							font-size: 24rpx;
							font-weight: 400;
							color: #F43F5E;
						}
						.count_text4{
							font-size: 24rpx;
							font-weight: 400;
							color: #F43F5E;
							align-self: flex-end;
						}
					}
					button{
						width: 216rpx;
						height: 80rpx;
						background: #F43F5E;
						border-radius: 39rpx;
						margin-left: 24rpx;
						font-size: 30rpx;
						font-weight: 500;
						color: #FFFFFF;
					}

				}
			}
		}
	}
</style>